<template>
	<view class="re-card bg-white flex-column align-center radius-xs" @click="toNewsDetail">
		<view class="aui-withe-box">
			<view class="aui-flex b-line">
				<img :src="newsthumb" alt="" class="aui-ad-img">
				<view class="aui-flex-box">
					<text class="title">{{ newstitle }}</text>
					<text class="subtitle">{{num}}万人阅读</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'card',
		props: {
			newscode: {
				type: String,
				default: ''
			},
			newsthumb: {
				type: String,
				default: ''
			},
			newstitle: {
				type: String,
				default: ''
			},

		},
		data() {
			return {
				num:Math.random(10).toFixed(2)
			};
		},
		methods: {
			toNewsDetail: function() {
				this.$emit('toNewsDetail');
			},
		}
	}
</script>

<style>
	.re-card {
		width: 50%;
		margin-top: 30rpx;
		float: left;
	}

	.aui-withe-box {
		background: #fff;
		border-radius: 5px;
		/* box-shadow: 0 3px 9px #d9d9d9; */
		width: 95%;
		margin: 0 auto;
		overflow: hidden;
		background-position: 50rpx;
	}

	.aui-flex {
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		padding: 2px;
		padding-bottom: -2px;
		position: relative;
		height: 540rpx;
	}

	.aui-ad-img {
		width: 100%;
		height: 440rpx;
		border-radius: 15px;
		margin: 0 auto;
	}

	.aui-flex-box {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		min-width: 0;
		color: #333;
		padding: 0px 3px 3px 3px;
		font-weight: normal;
		text-align: center;
		width: 100%;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
	}
	.title {
		display: block;
		font-size: 18px;
		text-align: left;
		font-weight: 600;
	}
	.subtitle {
		display: block;
		font-size: 14px;
		color: #999;
		text-align: left;
		margin-top: 5rpx;
	}
</style>